import * as React from "react";
import { useHistory } from "react-router-dom";
import style from "./style.module.css";
import Toast from "../../components/Toast";
import IconFont from "../../assets/icon";

import * as api from "../../services/user.services";

export default function Password() {
  const history = useHistory();
  const [password1, setPassword1] = React.useState<string>();
  const [password2, setPassword2] = React.useState<string>();
  const [password3, setPassword3] = React.useState<string>();
  const test = async () => {
    try {
      let result = await api.test(password1);
      if (result.stat === "ERR_PASSWORD_FALSE") {
        Toast("原密码错误,请重新输入密码");
      } else {
        if (result.stat === "OK") {
          if (password2 !== password3) {
            Toast("两次输入的密码不同，请重新输入");
          } else {
            let result = await api.addInfo(password2);
            if (result.stat === "ERR_PARAMS") {
              Toast("密码的格式错误，请输入6-8位的密码");
            } else {
              Toast(result.message);
            }
          }
        } else {
          Toast(result.message);
        }
      }
    } catch {}
  };
  return (
    <div className={style.back}>
      <div className={style.head}>
        <IconFont
          className={style.icon}
          type="icon-houtui"
          onClick={history.goBack}
        />
        <div className={style.title}>
          <p className={style.text}>修改密码</p>
        </div>
      </div>
      <div className={style.wrapper}>
        <div className={style.demo}>
          <span>原密码</span>
          <input
            type="text"
            placeholder="请填入原密码"
            className={style.inputText}
            onChange={(event) => setPassword1(event.target.value)}
          />
        </div>
        <div className={style.demo}>
          <span>新密码</span>
          <input
            type="text"
            placeholder="新密码"
            className={style.inputText}
            onChange={(event) => setPassword2(event.target.value)}
          />
        </div>
        <div className={style.demo1}>
          <span>确认密码</span>
          <input
            type="password"
            placeholder="确认密码"
            className={style.inputText}
            onChange={(event) => setPassword3(event.target.value)}
          />
        </div>
      </div>
      <button className={style.outputButton} onClick={test}>
        保存修改
      </button>
    </div>
  );
}
